<!-- 网站信息 -->
<template>
    <div class="login-register">
        <el-form ref="formRef" :rules="rules" :model="formData" label-width="120px">
            <el-card shadow="never" class="!border-none">
                <div class="font-medium mb-7">通用设置</div>

                <el-form-item label="登录方式" prop="loginWay">
                    <div>
                        <el-checkbox-group v-model="formData.login_way">
                            <!-- {{ item }} -->
                            <el-checkbox label="1">账号密码登录</el-checkbox>
                            <el-checkbox label="2">手机验证码登录</el-checkbox>
                            <el-checkbox label="3">扫码登录</el-checkbox>
                        </el-checkbox-group>
                        <div class="form-tips">系统通用登录方式，至少选择一项，登录方式开启循序决定用户登录时显示的循序</div>
                    </div>
                </el-form-item>
                <el-form-item label="当前登录循序">
                    <div>
                        <div v-for="(item, index) in formData.login_way">
                            <div class="form-tips" v-if="item == 1">{{ index + 1 }}.账号密码登录</div>
                            <div class="form-tips" v-if="item == 2">{{ index + 1 }}.手机验证码登录</div>
                            <div class="form-tips" v-if="item == 3">{{ index + 1 }}.扫码登录</div>
                        </div>
                    </div>
                </el-form-item>
                <el-form-item label="强制绑定手机" prop="coerce_mobile">
                    <div>
                        <el-switch v-model="formData.coerce_mobile" :active-value="1" :inactive-value="0" />
                        <span class="mt-1 ml-2">{{
                            formData.coerce_mobile ? '开启' : '关闭'
                        }}</span>

                        <div class="form-tips">
                            1、如果开启，则新用户在注册完成之后要强制绑定手机号<br />
                            2、老用户登录时如果检测到没有绑定手机，则要重新绑定手机号
                        </div>
                    </div>
                </el-form-item>
            </el-card>

            <el-card shadow="never" class="!border-none mt-4">
                <div class="font-medium mb-7">注册开关</div>

                <el-form-item label="注册开关" prop="register_switch">
                    <div>
                        <el-switch v-model="formData.register_switch" :active-value="1" :inactive-value="0" />
                        <span class="mt-1 ml-2">
                            {{ formData.register_switch ? '开启' : '关闭' }}
                        </span>
                    </div>
                </el-form-item>
            </el-card>
            <el-card shadow="never" class="!border-none">
                <div class="font-medium mb-7">基本设置</div>
                <el-form ref="formRef" :model="formDataing" label-width="120px">
                    <el-form-item label="用户默认头像">
                        <div>
                            <material-picker v-model="formDataing.default_avatar" :limit="1" />
                        </div>
                    </el-form-item>
                    <el-form-item>
                        <div>
                            <div class="form-tips">
                                用户注册时给的默认头像，建议尺寸：400*400像素，支持jpg，jpeg，png格式
                            </div>
                        </div>
                    </el-form-item>
                </el-form>
            </el-card>
        </el-form>

        <footer-btns v-perms="['setting.user.user/setRegisterConfig']">
            <el-button type="primary" @click="handleSubmit">保存</el-button>
        </footer-btns>
    </div>
</template>

<script lang="ts" setup name="loginRegister">
import type { LoginSetup } from '@/api/setting/user'
import { getLogin, setLogin } from '@/api/setting/user'
import type { FormInstance, FormRules } from 'element-plus'
const formRef = ref<FormInstance>()

// 表单数据
const formData = reactive<LoginSetup>({
    login_way: [],
    coerce_mobile: 0,
    login_agreement: 0,
    third_auth: 0,
    wechat_auth: 0,
    qq_auth: 0
})

// 表单验证
const rules = reactive<FormRules>({
    loginWay: [
        {
            required: true,
            validator: (rule: any, value: any, callback: any) => {
                const loginWay = formData.login_way.join('').length
                if (loginWay === 0) {
                    callback(new Error('登录方式至少选择一项！'))
                } else {
                    if (formData.login_way !== '') {
                        if (!formRef.value) return
                        formRef.value.validateField('checkPass', () => null)
                    }
                    callback()
                }
            },
            trigger: 'change'
        }
    ],
    coerce_mobile: [{ required: true, trigger: 'blur' }],
    login_agreement: [{ required: true, trigger: 'blur' }],
    third_auth: [{ required: true, trigger: 'blur' }]
})

// 获取登录注册数据
const getData = async () => {
    try {
        const data = await getLogin()
        for (const key in formData) {
            //@ts-ignore
            formData[key] = data[key]
        }
    } catch (error) {
        console.log('获取=>', error)
    }
}

// 保存登录注册数据
const handleSubmit = async () => {
    await formRef.value?.validate()
    try {
        await setLogin(formData)
        getData()
        handleSubmiting()
    } catch (error) {
        console.log('保存=>', error)
        handleSubmiting()
    }
}

getData()
import { getUserSetup, setUserSetup } from '@/api/setting/user'

// 表单数据
const formDataing = reactive({
    default_avatar: '' // 用户默认头像
})

// 获取用户设置数据
const getDataing = async () => {
    try {
        const data = await getUserSetup()
        for (const key in formDataing) {
            //@ts-ignore
            formDataing[key] = data[key]
        }
    } catch (error) {
        console.log('获取=>', error)
    }
}

// 保存用户设置数据
const handleSubmiting = async () => {
    try {
        await setUserSetup(formDataing)
        getData()
    } catch (error) {
        console.log('保存=>', error)
    }
}

getDataing()
</script>

<style lang="scss" scoped></style>
